<template>
  <div class="login-page">
    <div class="login-container">
      <div class="login-logo">
        <img src="../components/Header/logo/img.png" alt="logo">
      </div>
      <div class="login-form">
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
          <el-divider></el-divider>
          <h2 class="title">登录</h2>
          <el-form-item prop="username">
            <el-input
                prefix-icon="el-icon-user"
                type="text"
                placeholder="请输入用户名"
                v-model="loginForm.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
                prefix-icon="el-icon-lock"
                type="password"
                placeholder="请输入密码"
                v-model="loginForm.password"
                show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
                class="button-login"
                type="primary"
                @click="submitForm"
            >登录</el-button>
            <el-button
                class="button-reset"
                type="info"
                @click="resetForm"
            >重置</el-button>
          </el-form-item>
          <div class="tip">
          <div class="tip-1">没有账号？<router-link to="RegisterPage">点此注册</router-link> </div>
          <div class="tip-2">已有账号，<router-link to="">忘记密码</router-link></div>
            </div>
          <el-divider><p>其它方式</p></el-divider>
        </el-form>
        <div class="login-footer">
          <el-button type="text" class="button-1" @click="wechatLogin"><img src="../assets/icon32_wx_logo.png" alt="微信登录"></el-button>
          <el-button type="text" class="button-2" @click="wechatLogin"><img src="../assets/phone.png" alt="手机登录"></el-button>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="router">
        <router-link to="HomePage" style="margin-right: 10px">橙子超市</router-link>
        <router-link to="AboutPage" style="margin-right: 10px">关于本站</router-link>
        <router-link to="TermsPage" style="margin-right: 10px">服务条款</router-link>
      </div>
    </div>

    <el-dialog
        title="其它方式登录"
        center
      :visible.sync="wechatDialog"
      width="20%">
      <h2 style="text-align: center;color: blue">该功能暂时无法使用</h2>
      <el-button type="primary" @click="wechatDialog=false" style="margin-left: 35%">确定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import axios from "@/axios/axios";

export default {
  data() {
    return {
      loginForm:{
        username: '',
        password: '',
      },
      wechatDialog: false,

      loginRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
          {
            pattern: /^[a-zA-Z0-9]+$/,
            message: "用户名只能包含数字和英文字母(大小写)",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
      }
    }
  },

  methods: {
    /**
     * 重置登录表单
     */
    resetForm() {
      this.$refs.loginForm.resetFields();
      this.$message.info("重置成功");
    },

    submitForm() {
      this.$refs["loginForm"].validate((valid) => {
        if (valid) {
          axios.post("/user/page/login", this.loginForm).then((response) => {
            if (response.data.code === 0) {
              this.$message.error(response.data.msg);
            }else {
              const token = response.data.data.token;
              // 将令牌保存到localStorage中
              localStorage.setItem("orange_supermarket", token);
              //将其它消息保存
              localStorage.setItem("username_supermarket", response.data.data.username);
              localStorage.setItem("avatarUrl_supermarket", response.data.data.avatarUrl);
              localStorage.setItem("id_supermarket", response.data.data.id);
              //跳转到主页面
              this.$message.success("登录成功");
              this.$router.push("HomePage");
            }
          }).catch((error) => {
            console.log(error)
          });
        }else {
          console.log("error submit!");
          return false;
        }
      })
    },

    /**
     * 微信登录
     */
    wechatLogin() {
     this.wechatDialog = true;
    }
  }
}
</script>

<style scoped>
.login-page {
  background-image: url("../assets/background.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh;
  display: flex;
  flex-direction: column; /* 将主轴改为垂直方向 */
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
}

.login-container {
  display: flex;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-bottom: 20px; /* 添加底部边距 */
}

.login-logo {
  width: 400px;
  background-color: #99a9bf;
  padding: 20px;
}

.footer {
  text-align: center;
  width: 100%;
}

.router {
  font-size: 14px;
  color: #272727;
}

.login-form {
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.button-login {
  width: 120px;
  margin-right: 20px;
}

.button-reset {
  width: 120px;
  margin-left: 20px;
}

.title {
  color: #3c3c3c;
}

.tip{
  display: flex;
}

.tip-1, .tip-2 {
  font-size: 13px;
}

.tip-2 {
  margin-left: auto;
}

.login-footer {
  padding-left: 20px;
  padding-right: 20px;
}

.button-1 {
  margin-left: 20px;
  margin-right: 20px;
}

.button-2 {
  margin-left: 20px;
  margin-right: 20px;
}
</style>